<<template>
  <view class="chat-container">
     
	<uni-nav-bar left-icon="left" title="客服服务" :border="false" style="border-bottom: 1px solid #eee;" @clickLeft="back" />
    <view class="chat-body" @scrolltolower="loadMoreMessages">
      <block v-for="(message, index) in messages" :key="index">
        <view v-if="message.type === 'user'" class="message user-message">
          <view class="message-content">
            <text>{{ message.text }}</text>
          </view>
        </view>
        <view v-else class="message customer-message">
          <view class="message-content">
            <text>{{ message.text }}</text>
          </view>
        </view>
      </block>
    </view>
    <view class="chat-footer">
      <input type="text" v-model="inputMessage" @confirm="sendMessage" placeholder="请输入您的问题...">
    </view>
    <view class="keyword-tips">
          <text v-for="(keyword, index) in displayKeywords" :key="index" @click="selectKeyword(keyword)" class="keyword-link">
            {{ keyword }}
          </text>
        </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      inputMessage: '',
      messages: [
        { type: 'customer', text: '您好，有什么可以帮助您的吗？' }
      ],
      displayKeywords: ['营养健康', '更新菜谱', '分享推荐'], // 界面上显示的关键字
      matchKeywords: ['营养健康', '更新菜谱', '分享推荐','谢','替换','难度','反馈','菜谱','食谱','宫保鸡丁','白切鸡','荷兰豆炒木耳'], // 用于匹配的所有关键字
    };
  },
  methods: {
	back() {
		uni.navigateBack({
			delta: 1
		})
	},
    sendMessage() {
      if (this.inputMessage.trim() !== '') {
        this.messages.push({ type: 'user', text: this.inputMessage });
        this.inputMessage = '';
        this.checkKeywords();
      }
    },
    checkKeywords() {
      const lastMessage = this.messages[this.messages.length - 1];
      if (lastMessage.type === 'user') {
        const keyword = this.matchKeywords.find(k => lastMessage.text.includes(k));
        if (keyword) {
          this.messages.push({ type: 'customer', text: this.getResponse(keyword) });
        } else {
          this.messages.push({ type: 'customer', text: '对不起，无法理解你的意思。' });
        }
      }
    },
    getResponse(keyword) {
      const responses = {
        '营养健康': '我们提供每道菜谱的详细营养信息，包括卡路里、蛋白质、脂肪等。请告诉我您需要了解哪道菜谱的营养信息。',
        '更新菜谱': '我们定期更新菜谱，以确保内容的新鲜和准确。您可以查看我们的最新菜谱。',
        '分享推荐': '如果您想要分享菜谱，我们提供了分享功能，您可以轻松地通过社交媒体或邮件分享给您的朋友。',
        '替换': '如果您缺少某些食材，我可以帮您找到合适的替代品。请告诉我您需要替换的食材。',
		'难度': '我们有不同难度级别的菜谱，从初学者到高级厨师都有适合的选项。',
		'反馈': '我们非常重视您的反馈。如果您对我们的菜谱有任何评价或建议，请告诉我。',
		'谢': '如果您需要进一步的帮助，请联系我们的客服团队。我们会尽快回复您。',
		'菜谱': '请输入您想要搜索的菜谱名称，例如‘宫保鸡丁’，我可以帮您找到相关的菜谱。',
		'食谱': '请输入您想要搜索的菜谱名称，例如‘宫保鸡丁’，我可以帮您找到相关的菜谱。',
		'宫保鸡丁': '宫保鸡丁是一道经典的川菜，以其麻辣、鲜香、酸甜的口味而闻名。它通常由鸡胸肉丁、干辣椒、花椒、葱、姜、蒜和花生米等食材制成。',
		'白切鸡': '白切鸡是一道广东菜，以其清淡、肉质鲜嫩、皮脆而著称。这道菜的关键在于煮鸡的火候控制，以及搭配的蘸料。',
		'荷兰豆炒木耳': '荷兰豆炒木耳是一道色香味俱佳的素菜，荷兰豆的清脆与木耳的滑嫩相结合，营养丰富，口感丰富。',
      };
      return responses[keyword] || '您好，有什么可以帮助您的吗？';
    },
    selectKeyword(keyword) {
      this.inputMessage = keyword;
      this.sendMessage();
    }
  }
}
</script>
<style>
.chat-container {
  width: 100%;
  height: 93vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  
}

.chat-header {
  background-color: #107bff;
  color: white;
  text-align: center;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
}

.chat-body {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  background-color: #ffffff;
}

.message {
  display: flex;
  margin-bottom: 15px;
}

.user-message {
  justify-content: flex-end;
}

.customer-message {
  justify-content: flex-start;
}

.message-content {
  max-width: 60%;
  padding: 10px;
  border-radius: 5px;
  word-wrap: break-word;
}

.user-message .message-content {
  background-color: #e0f7fa;
  color: #00796b;
}

.customer-message .message-content {
  background-color: #e8f5e9;
  color: #388e3c;
}

.chat-footer {
  display: flex;
  padding: 10px;
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
}

.keyword-tips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #f0f0f0;
  padding: 10px;
  margin-top: 10px;
}

.keyword-link {
  margin: 5px;
  padding: 5px 10px;
  border: 1px solid #007bff;
  border-radius: 5px;
  color: #007bff;
  text-decoration: none;
  cursor: pointer;
}

.keyword-link:hover {
  background-color: #e0e0e0;
}
</style>